import React from 'react';
import { connect } from 'react-redux';
import {initTaskList} from '../action/action';

const mapStateToProps = state => {
    return {
        tasks: state.tasksReducer.tasks,
        isLoad:state.tasksReducer.isLoad
    }
}



const mapDispatchToProps = dispatch => {
    return {
        updateTask:(tasks)=>{
            console.log("updateTask",tasks);
            dispatch(initTaskList(tasks));
        }
    }
}


 class CompleteTask extends React.Component {

    componentDidMount(){
       
    }

    unfinshTask(id){
        const tasks = [...this.props.tasks];
        tasks.map(function(taskItem){
            if(taskItem.id == id){
                taskItem.status = "0"//完成
            }
        });
        this.props.updateTask(tasks);
    }
    createTaskList(tasks){
        var _this = this;
        var tasks = tasks.filter(item=>item.status =="1");
        return tasks.map(function(task){
             return <div>
                 <input type="checkbox"  checked="checked" key ={"key_" + task.id} id={"input_" + task.id} onClick={_this.unfinshTask.bind(_this,task.id)}/>   
                 {task.text}
                 <button>删除</button>
             </div>
        })
    }

    
    
    render() {
        return (
            <div>
                已完成任务内容
                {this.createTaskList(this.props.tasks)}
            </div>
        )
    }
}


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(CompleteTask)